<template>
  <a-card style="width: 100%">
    <a-form :form="form">
      <a-row :gutter="48">
        <a-col :sm="{span:24}" :lg="{span:12}">
          <a-upload name="file"
                    :multiple="true"
                    :action="uploadUrl"
                    :headers="{
                      Authorization: this.$store.state.account.token
                    }"
                    @change="handleChange">
            <a-button>
              <a-icon type="upload" /> 点击上传学生数据文件
            </a-button>
          </a-upload>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:6}">
          <a-button type="link" @click="downloadTpl">
            下载模板
          </a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script>
// import moment from 'moment'
import { mapState } from 'vuex'
import ACol from "ant-design-vue/es/grid/Col";

export default {
  name: 'StuImport',
  components: {ACol},
  data () {
    return {
      loading: false,
      uploadUrl:`${process.env.SERVICE}schoolRoll/xjxx/impXsxx`
    }
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo
    })
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.$store.dispatch('app/sysInfo', true).then(res => {
      this.$nextTick(() => {
        this.form.setFieldsValue({lrsj: [res.studentInfoSupplementStart, res.studentInfoSupplementEnd]})
      })
    })
  },
  methods: {
    handleChange (info) {
      console.log(info)
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 学生数据导入成功`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 学生数据导入失败.`);
      }
    },
    downloadTpl (){
      // window.href = `${process.env.UPLOAD_STU_DATA_TPL}`
      this.$export('schoolRoll/xjxx/download')
    }
  }
}
</script>
